<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="10">
        <div class="filter-container query">
          <el-input v-model="typeListQuery.query" size="small" placeholder="积分事项类型" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="handleTypeFilter" />
          <el-button :loading="typeListLoading" size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="handleTypeFilter">
            查询
          </el-button>
          <el-button size="mini" class="filter-item" type="success" icon="el-icon-circle-plus-outline" @click="handleAddType">
            新增
          </el-button>
        </div>

        <el-table
          ref="typeTable"
          :loading="typeListLoading"
          :data="typeList"
          border
          fit
          highlight-current-row
          size="small"
          @row-click="handleSelectTypeRow"
        >
          <el-table-column label="操作" header-align="center" align="center" width="145">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handleEditType(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDeleteType(scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column label="积分类型" prop="pointType" min-width="50%" header-align="center" align="left">
            <template slot-scope="scope">
              <span>{{ scope.row.pointType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="积分类型名" prop="pointTypeName" min-width="50%" header-align="center" align="left">
            <template slot-scope="scope">
              <span>{{ scope.row.pointTypeName }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="typeTotal>0" :total="typeTotal" :page.sync="typeListQuery.pageNo" :limit.sync="typeListQuery.pageSize" @pagination="getPointTypeList" />

      </el-col>
      <el-col :span="14">
        <div class="filter-container">
          <el-button :loading="codeListLoading" size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="handleCodeFilter">
            刷新
          </el-button>
          <el-button size="mini" class="filter-item" type="success" icon="el-icon-circle-plus-outline" @click="handleAddCode">
            新增
          </el-button>
        </div>

        <el-table
          ref="codeTable"
          :loading="codeListLoading"
          :data="codeList"
          border
          fit
          highlight-current-row
          size="small"
        >
          <el-table-column label="操作" header-align="center" align="center" width="145">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handleEditCode(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDeleteCode(scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column label="积分编码" prop="pointCode" min-width="30%" header-align="center" align="left">
            <template slot-scope="scope">
              <span>{{ scope.row.pointCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="积分名称" prop="pointName" min-width="30%" header-align="center" align="left">
            <template slot-scope="scope">
              <span>{{ scope.row.pointName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="积分操作数" prop="pointNum" min-width="20%" header-align="center" align="right">
            <template slot-scope="scope">
              <span>{{ scope.row.pointNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="限制次数" prop="count" min-width="20%" header-align="center" align="right">
            <template slot-scope="scope">
              <span>{{ scope.row.count }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="codeTotal>0" :total="codeTotal" :page.sync="codeListQuery.pageNo" :limit.sync="codeListQuery.pageSize" @pagination="getPointCodeList" />
      </el-col>
    </el-row>

    <!-- 积分类型信息维护 -->
    <el-dialog :title="dialogStatus==='create'?'新建积分类型':'修改积分类型信息'" :visible.sync="typeDialogFormVisible" width="500px" :close-on-click-modal="false" :close-on-press-escape="false" center>
      <el-form ref="dataTypeForm" :rules="rules" :model="tempType" label-position="right" label-width="100px" class="form-center">
        <el-form-item label="数据类型" prop="pointType">
          <el-input v-model="tempType.pointType" maxlength="64" />
        </el-form-item>
        <el-form-item label="类型名称" prop="pointTypeName">
          <el-input v-model="tempType.pointTypeName" maxlength="128" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="typeDialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createTypeData():updateTypeData()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <!-- 积分信息维护 -->
    <el-dialog :title="dialogStatus==='create'?'新建积分信息':'修改积分信息'" :visible.sync="codeDialogFormVisible" top="3vh" width="500px" :close-on-click-modal="false" :close-on-press-escape="false" center>
      <el-form ref="dataCodeForm" :rules="rules" :model="tempCode" label-position="right" label-width="100px" class="form-center">
        <el-form-item label="积分类型" prop="pointType">
          <el-input v-model="tempCode.pointType" :disabled="true" />
        </el-form-item>
        <el-form-item label="积分类型名称" prop="pointTypeName">
          <el-input v-model="tempCode.pointTypeName" :disabled="true" />
        </el-form-item>
        <el-form-item label="积分编码" prop="pointCode">
          <el-input v-model="tempCode.pointCode" maxlength="64" />
        </el-form-item>
        <el-form-item label="积分名称" prop="pointName">
          <el-input v-model="tempCode.pointName" maxlength="128" />
        </el-form-item>
        <el-form-item label="积分操作数" prop="pointNum">
          <el-input v-model="tempCode.pointNum" type="number" />
        </el-form-item>
        <el-form-item label="限制次数" prop="count">
          <el-input v-model="tempCode.count" type="number" />
        </el-form-item>
        <el-form-item label="备注描述" prop="pointExplain">
          <el-input v-model="tempCode.pointExplain" type="textarea" :rows="4" maxlength="256" show-word-limit />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="codeDialogFormVisible = false">
          取消
        </el-button>
        <el-button :loading="ajaxSubmiting" type="primary" @click="dialogStatus==='create'?createCodeData(false):updateCodeData()">
          保存&退出
        </el-button>
        <el-button v-if="dialogStatus==='create'" :loading="ajaxSubmiting" type="success" @click="createCodeData(true)">
          保存&继续
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getTypeList, getCodeList, deletePoint, deletePointTypeInfo, updatePointTypeInfo, updatePoint, createPoint, checkTypeExists } from '@/api/base/dict/point'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'Point',
  components: { Pagination },
  data() {
    return {
      typeListLoading: false,
      typeList: [],
      typeTotal: 0,
      codeListLoading: false,
      codeList: [],
      dialogStatus: '',
      codeTotal: 0,
      typeDialogFormVisible: false,
      codeDialogFormVisible: false,
      typeListQuery: {
        pageNo: 1,
        pageSize: 20,
        query: ''
      },
      codeListQuery: {
        pageNo: 1,
        pageSize: 20,
        pointType: '',
        pointTypeName: ''
      },
      tempType: {
        pointType: '',
        pointTypeName: '',
        oldPointType: ''
      },
      tempCode: {
        id: null,
        pointType: '',
        pointTypeName: '',
        pointCode: '',
        pointName: '',
        pointNum: '',
        count: ''
      },
      fileList: [],
      rules: {
        pointType: [{ required: true, message: '数据类型不能为空', trigger: 'change' }],
        pointTypeName: [{ required: true, message: '类型名称不能为空', trigger: 'change' }],
        pointCode: [{ required: true, message: '积分编码不能为空', trigger: 'change' }],
        pointName: [{ required: true, message: '积分名称不能为空', trigger: 'change' }]
      },
      ajaxSubmiting: false
    }
  },
  watch: {
    uploadExcelDialogVisible: function() {
      this.fileList = []
    }
  },
  created() {
    this.getPointTypeList()
  },
  methods: {
    updateCodeData() {
      this.$refs['dataCodeForm'].validate((valid) => {
        if (valid) {
          this.ajaxSubmiting = true
          updatePoint(this.tempCode).then(response => {
            this.$message({
              message: '积分信息更新成功!',
              type: 'success'
            })
            this.ajaxSubmiting = false
            this.handleCodeFilter()
            this.codeDialogFormVisible = false
          }, () => {
            this.ajaxSubmiting = false
          })
        }
      })
    },
    createCodeData(continueFlag) {
      this.$refs['dataCodeForm'].validate((valid) => {
        if (valid) {
          this.ajaxSubmiting = true
          createPoint(this.tempCode).then(response => {
            this.$message({
              message: '积分信息创建成功!',
              type: 'success'
            })
            this.ajaxSubmiting = false
            this.handleCodeFilter()
            if (!continueFlag) {
              this.codeDialogFormVisible = false
            } else {
              this.tempCode.pointCode = ''
              this.tempCode.pointName = ''
              this.tempCode.pointExplain = ''
              this.tempCode.pointNum = ''
              this.$nextTick(() => {
                this.$refs['dataCodeForm'].clearValidate()
              })
            }
          }, () => {
            this.ajaxSubmiting = false
          })
        }
      })
    },
    handleAddCode() {
      if (this.codeListQuery.pointType === '') {
        return
      }
      this.tempCode = {
        id: null,
        pointType: this.codeListQuery.pointType,
        pointTypeName: this.codeListQuery.pointTypeName,
        pointCode: '',
        pointName: '',
        count: 0,
        pointExplain: ''
      }
      this.dialogStatus = 'create'
      this.codeDialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataCodeForm'].clearValidate()
      })
    },
    updateTypeData() {
      this.$refs['dataTypeForm'].validate((valid) => {
        if (valid) {
          this.ajaxSubmiting = true
          updatePointTypeInfo(this.tempType).then(response => {
            this.$message({
              message: '数据类型信息更新成功!',
              type: 'success'
            })
            this.ajaxSubmiting = false
            this.handleTypeFilter()
            this.typeDialogFormVisible = false
          }, () => {
            this.ajaxSubmiting = false
          })
        }
      })
    },
    handleSelectTypeRow(row, column, event) {
      this.codeListQuery = {
        pageNo: 1,
        pointType: row.pointType,
        pointTypeName: row.pointTypeName
      }
      this.getPointCodeList()
    },
    handleTypeFilter() {
      this.typeListQuery.pageNo = 1
      this.getPointTypeList()
    },
    handleAddType() {
      this.tempType = {
        pointType: '',
        pointTypeName: '',
        oldPointType: ''
      }
      this.dialogStatus = 'create'
      this.typeDialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataTypeForm'].clearValidate()
      })
    },
    createTypeData() {
      this.$refs['dataTypeForm'].validate((valid) => {
        if (valid) {
          // 判断类型不存在以后添加
          if (this.typeList.length > 0) {
            for (const t of this.typeList) {
              if (t.pointType === this.tempType.pointType) {
                this.$message({
                  message: '数据类型[' + this.tempType.pointType + ']已存在!',
                  type: 'warning'
                })
                return
              }
            }
          }
          checkTypeExists(this.tempType.pointType).then((response) => {
            if (response.data === true) {
              this.$message({
                message: '数据类型[' + this.tempType.pointType + ']已存在!',
                type: 'warning'
              })
            } else {
              const row = Object.assign({}, this.tempType)
              this.typeList.push(row)
              this.$refs['typeTable'].setCurrentRow(row)
              this.typeDialogFormVisible = false
              this.handleSelectTypeRow(row)
              this.handleAddCode()
            }
          })
        }
      })
    },
    handleCodeFilter() {
      this.codeListQuery.pageNo = 1
      this.getPointCodeList()
    },
    handleEditType(row) {
      this.tempType = Object.assign({}, row)
      this.tempType.oldPointType = row.pointType
      this.dialogStatus = 'update'
      this.typeDialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataTypeForm'].clearValidate()
      })
    },
    handleEditCode(row) {
      this.tempCode = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.codeDialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataCodeForm'].clearValidate()
      })
    },
    handleDeleteType(row) {
      this.$msgbox({
        type: 'warning',
        title: '确认信息',
        message: '确认删除数据类型[' + row.pointType + ']?',
        showCancelButton: true,
        showClose: false,
        closeOnPressEscape: false,
        closeOnClickModal: false,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            deletePointTypeInfo(row.pointType).then((response) => {
              this.getPointTypeList()
              this.$message({
                message: '数据类型[' + row.pointType + ']删除成功!',
                type: 'success'
              })
              done()
              instance.confirmButtonLoading = false
            }, (response) => {
              done()
              instance.confirmButtonLoading = false
            })
          } else {
            done()
          }
        }
      })
    },
    handleDeleteCode(row) {
      this.$msgbox({
        type: 'warning',
        title: '确认信息',
        message: '确认删除积分信息[' + row.pointType + '/' + row.pointCode + ']?',
        showCancelButton: true,
        showClose: false,
        closeOnPressEscape: false,
        closeOnClickModal: false,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            deletePoint(row.id).then((response) => {
              this.getPointCodeList()
              this.$message({
                message: '积分信息[' + row.pointType + '/' + row.pointCode + ']删除成功!',
                type: 'success'
              })
              done()
              instance.confirmButtonLoading = false
            }, (response) => {
              done()
              instance.confirmButtonLoading = false
            })
          } else {
            done()
          }
        }
      })
    },
    getPointTypeList() {
      this.typeListLoading = true
      getTypeList(this.typeListQuery).then(response => {
        this.typeList = response.data
        this.typeTotal = response.total
        this.codeList = []
        this.codeTotal = 0
        this.typeListLoading = false
      })
    },
    getPointCodeList() {
      this.codeListLoading = true
      getCodeList(this.codeListQuery).then(response => {
        this.codeList = response.data
        this.codeTotal = response.total
        this.codeListLoading = false
      })
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleUpload() {
      this.uploadExcelDialogVisible = true
    }
  }
}
</script>
